<template>
  <div class="rolePerId">
    <el-dialog :visible="showRolePer" title="分配权限" @close="close">
      <el-tree
        ref="tree"
        :data="rolePerData"
        node-key="id"
        default-expand-all
        show-checkbox
        check-strictly
        :props="defaultProps"
      >
      </el-tree>
      <div slot="footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleInfoApi,
  getAllRolePerApi,
  setRolePerApi
} from '../../../api/role'
export default {
  props: ['showRolePer'],
  data () {
    return {
      rolePerData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      permIds: [],
      id: ''
    }
  },
  created () {},
  methods: {
    async submit () {
      this.permIds = this.$refs.tree.getCheckedKeys()
      await setRolePerApi({
        id: this.id,
        permIds: this.permIds
      })
      this.$message.success('分配成功')
      this.$emit('update:showRolePer', false)
    },
    async getTreeListHanlde () {
      const res = await getAllRolePerApi()
      this.rolePerData = this.turnData(res, '0')
    },
    async getRoleInfo (id) {
      this.id = id
      const res = await getRoleInfoApi(id)
      this.$refs.tree.setCheckedKeys(res.permIds)
    },
    close () {
      this.$emit('update:showRolePer', false)
    },
    turnData (arr, str) {
      return arr.filter(item => {
        if (item.pid === str) {
          item.children = this.turnData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style l Dialogang="scss" scoped>
.rolePerId {
}
</style>
